<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				font: 12px/1.5 "microsoft yahei";
			}

			div {
				background-color: hotpink;

			}

			div {
				background-color: skyblue;
				width: 200px;
				height: 200px;
			}

			p {
				background-color: yellow;
				font-size: 25px;
			}
			h3 {
				font-size: 25px;
			}
		</style>
	</head>
	<body>
		<h1>css三大特性:层叠性、继承性、优先级</h1>
		<div>这是层叠性的测试,冲突的样式会层叠,就近原则,不冲突的样式不会</div>
	</body>

	<p>
		<span>这是继承性的测试,继承主要是继承文字相关的样式</span>
	</p>
	<h3>继承的一种特殊情况继承行高,行高的特殊写法1.5表示子元素的行高为当前元素字体大小的1.5倍,他的优点是可以动态根据文字大小调整行高</h3>
	<h1>优先级:如果选择器相同则执行层叠性
	<ul>
		<li>通配符选择器 权重0000</li>
		<li>标签选择器 权重0001</li>
		<li>类或伪类选择器 权重0010</li>
		<li>id选择器 权重0100</li>
		<li>行内样式 权重1000</li>
		<li>!important 权重无穷大</li>
	</ul>
	</h1>
	<h2>权重的比较从左到右永不进位,并且继承的权重都为0,解释了为什么a标签需要单独写样式，因为制定了默认样式</h2>
	<br>
	<br>
	<br>
	<h1>复合选择器存在权重叠加的问题,需要计算权重的大小但不会进位,注意其中a:hover权重是11,ul标签到li标签也是继承关系,一定要区分开每一个标签</h1>
</html>
